<template>
  <div class="overview-container">
    <h2 class="page-title">系统概览</h2>
    <div class="box">
      <div class="inner">
        <h3>设备总数</h3>
        <p>
          <count-to :startVa="0" :endVal="overview.number" :duration="2000" />
        </p>
      </div>
    </div>
    <div class="box">
      <div class="inner">
        <h3>设备总金额</h3>
        <p>
          <count-to :startVa="0" :endVal="overview.amount" :duration="2000" />
        </p>
      </div>
    </div>

    <!-- echart图表 -->
    <div class="chart-list clearfix">
      <chart-box ref="status" />
      <chart-box ref="category" />
    </div>
  </div>
</template>
<script>
import CountTo from "vue-count-to";
import ChartBox from "@/components/ChartBox.vue";
export default {
  components: {
    CountTo,
    ChartBox,
  },
  data() {
    return {
      overview: {
        amount: 0,
        number: 0,
      },
      timeId:null
    };
  },
  created() {
    this.getOverview();
  },
  mounted() {
    this.getChartData();
    window.addEventListener('resize',this.resize)
  },
  beforeDestroy(){
    window.removeEventListener('resize',this.resize)
  },
  methods: {
    getOverview() {
      this.axios.get("/overview").then((data) => {
        if (!data.code) {
          this.overview = data.data;
        }
      });
    },
    getChartData() {
      this.axios.get("/status-overview").then((data) => {
        // console.log(data);
        if (!data.code) {
          this.drawStatus(data.data);
        }
      });
      this.axios.get("/category-overview").then((data)=>{
        if (!data.code) {
          this.drawCategory(data.data);
        }
      });
    },
    drawStatus(data) {
      const config = {
        title: {
          text: "设备的总数",
          left: "center",
          top: 20,
          textStyle: {
            fontWeight: "bold",
            color: "#666",
          },
        },
        series: [
          {
            color: ["#c23431", "#2f455f", "#61a0a8", "#d48265"],
            type: "pie",
            radius: "50%",
            data: data.label.map((name, index) => ({
              value: data.value[index],
              name,
            })),
            label: {
              formatter: "{b}:{c}",
            },
          },
        ],
      };
      this.$refs.status.draw(config);
    },
    drawCategory(data) {
      const config = {
        title: {
          text: "设备分类汇总",
          left: "center",
          top: 20,
          textStyle: {
            fontWeight: "bold",
            color: "#666",
          },
        },
        xAxis: {
          type: "category",
          data: data.label,
          axisLabel: { interval: 0, rotate: 30 },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            color:"rgb(192, 54, 54)",
            data: data.value,
            type: "bar",
          },
        ],
      };
      this.$refs.category.draw(config)
    },
    resize(){
      //防抖
      if(this.timeId){
        clearTimeout(this.timeId)
      }
      this.timeId = setTimeout(() => {
        this.$refs.status.resize()
        this.$refs.category.resize()
      }, 200);
    }
  },
};
</script>
<style lang="sass" scoped>
.overview-container
  padding: 0 30px
  .box
    display: inline-block
    height: 100px
    border-radius: 8px
    padding: 0 30px 0 90px
    background-repeat: no-repeat
    background-position: 30px center
    background-size: 30px
    &:nth-child(2)
      background-color: rgba(171,125,246,.2)
      background-image: url(~@/assets/img/icon1.png)
      margin-right: 30px
      color: rgb(171, 125, 246)
    &:nth-child(3)
      background-color: rgba(230,244,212,.8)
      background-image: url(~@/assets/img/icon2.png)
      color: #81c926
    h3,p
      white-space: nowrap
      text-align: center
    h3
      margin-top: 20px
      line-height: 20px
      font-size: 16px
    p
      font-size: 30px
      font-weight: 700
  .chart-list
    margin-top: 36px
    .chart-box
      float: left
      height: 420px
      &:first-child
        width: 35%
        margin-right: 3%
      &:last-child
        width: 55%
</style>
